<template lang="html">
  <div class="verify">
    <div class="verifyTitle">

    </div>
    <div class="verifyBox">
      <div class="boxTitle">
        订单校验
      </div>
      <div class="boxHint">
        <span>
          <img src="../../assets/img/tishi.png" alt="">
          温馨提示：根据国家对跨境贸易的相关规定，需确保订 购人的身份信息真实有效，并且与支付人一致，否则会报关失败哦。
        </span>
      </div>
      <div class="boxContent" v-if="isShow">
        <img src="../../assets/img/loading.png" alt="">
        <p class="desc">订单已提交，正在校验中，请等待......</p>
        <p>预计等待5~10s</p>
      </div>
      <div class="boxContentError" v-else>
        <img src="../../assets/img/orderError.png" alt="">
        <p>
          <span style="fontWeight: bold;">校验完成：</span>其中<span style="color:#E93030;">{{tableData.length}}</span>项商品校验失败，请返回重新下单 
        </p>
        <div class="errorTable">
          <template>
            <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background:'rgba(56,92,200,.1)'}">
              <el-table-column prop="date" label="商品" min-width="200">
                <template slot-scope="scope">
                  <div class="shop">
                    <div class="shopLeft">
                      <img :src="$getImg(scope.row.image)" alt="">
                    </div>
                    <div class="shopRight">
                      <p>{{scope.row.goods_name}}</p>
                      <span>数量: {{scope.row.total_num}}</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="trade_type_name" label="贸易类型"></el-table-column>
              <el-table-column prop="goods_attr" label="规格"></el-table-column>
              <el-table-column prop="total_pay_price" label="价格"></el-table-column>
            </el-table>
          </template>
        </div>
        <div class="errorBtn">
          返回
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name : "verify",
    data : function () {
      return {
        isShow : true,
        tableData : [],
        order_no : ""
      }
    },
    created () {
      this.order_no = this.$route.query.order_no;
      this.getVerify();
    },
    methods : {
      getVerify () {
        this.$HttpGet("/index.php?s=/admin/home.order/pay_source",{
          order_no : this.order_no
        }).then(res => {
          if (res.data.status_pay) {
            this.$router.push({path: `/index/play?order_id=${res.data.order_id}`});
          } else {
            this.isShow = false;
            this.tableData = res.data.goods;
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .verify {
    .verifyTitle {
      width: 100%;
      height: 88px;
      background: #ffffff;
    }
    .verifyBox {
      margin: 20px;
      padding: 20px 20px 70px 20px;
      background: #ffffff;
      .boxTitle {
        font-size: 16px;
        color: #000000;
      }
      .boxHint {
        margin-top: 20px;
        span {
          img {
            width: 14px;
            height: 14px;
            vertical-align: sub;
            margin-right: 7px;
          }
          background: rgba(245,225,194,0.25);
          padding: 7px 15px;
          font-size: 12px;
          color: #FDA95E;
        }
      }
      .boxContent {
        img {
          width: 546px;
          height: 403px;
          display: block;
          margin: 62px auto 91px auto;
        }
        p {
          font-size: 16px;
          margin-bottom: 26px;
          text-align: center;
        }
        .desc {
          font-weight: bold;
        }
      }
      .boxContentError {
        >img {
          width: 339px;
          height: 252px;
          display: block;
          margin: 34px auto 57px auto;
        }
        p {
          text-align: center;
          font-size: 16px;
        }
        .errorTable {
          margin-top: 50px;
          .shop {
            display: flex;
            .shopLeft {
              img {
                width: 56px;
                height: 56px;
                margin-right: 16px;
              }
            }
            .shopRight {
              p {
                font-size: 12px;
                color: #000000;
                text-align: left;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }
              span {
                color: rgba(0,0,0,.6);
                font-size: 12px;
              }
            }
          }
        }
        .errorBtn {
          width: 130px;
          height: 44px;
          line-height: 44px;
          background: #3A61CA;
          border-radius: 22px;
          color: #ffffff;
          text-align: center;
          margin: 62px auto 0 auto;
        }
      }
    }
  }
</style>
